<template>
	<view class="withdrawal-account-container">
		<up-navbar :title="t('Withdrawal account')" @click="goWithdraw" :autoBack="true">
								<template #left>
								  <view class="nav-back-btn">
								    <image class="back-icon" src="@/static/img/left.png"></image>
								  </view>
								</template>
							</up-navbar>

		
		<view class="header-section">
			<view class="title-section">
				<text class="main-title">{{t('Withdrawal')}}</text>
				<text class="main-title">{{t('Account')}}</text>
			</view>
			<view class="credit-card-3d">
				<view class="card-body">
					<view class="card-chip"></view>
					<view class="card-logo"></view>
					<view class="card-stripe"></view>
				</view>
			</view>
		</view>

		
		<view class="form-section">
			<view class="input-group">
				<text class="input-label">{{t('Select Wallet')}}</text>
				<view class="bank-select-input" @click="showBankSelector">
					<input 
						v-model="baseData.cardForm.ifsc" 
						type="text"
						:placeholder="t('Please select Wallet')"
						class="form-input bank-input"
						readonly
						disabled="true"
					/>
					<text class="arrow-icon">›</text>
				</view>
			</view>
			
			<view class="input-group">
				<text class="input-label">{{t('Holder Name')}}</text>
				<input 
					v-model="baseData.cardForm.holder_name" 
					type="text"
					:placeholder="t('Please Enter')"
					class="form-input"
				/>
			</view>
			
			<view class="input-group">
				<text class="input-label">{{t('Account Number')}}</text>
				<input 
					v-model="baseData.cardForm.account_num" 
					type="text"
					:placeholder="t('Please Enter')"
					class="form-input"
				/>
			</view>
			
			<view class="input-group">
				<text class="input-label">{{t('Email')}}</text>
				<input 
					v-model="baseData.cardForm.accEmail" 
					type="email"
					:placeholder="t('Please Enter')"
					class="form-input"
				/>
			</view>
			
			<view class="input-group">
				<text class="input-label">{{t('Account Phone')}}</text>
				<input 
					v-model="baseData.cardForm.acc_phone" 
					type="tel"
					:placeholder="t('Please Enter')"
					class="form-input"
				/>
			</view>
		</view>

		
		<view class="submit-section">
			<view class="submit-button" @click="addBank">
				<text class="submit-text">{{t('Save')}}</text>
			</view>
		</view>

		
		<view class="note-section">
			<text class="note-title">{{t('Important Notes')}}</text>
			<text class="note-text">• {{t('Please ensure all information is accurate')}}</text>
			<text class="note-text">• {{t('Account holder name should contain only letters')}}</text>
			<text class="note-text">• {{t('Email format must be valid')}}</text>
			<text class="note-text">• {{t('Please select the correct and active wallet (Bkash/Nagad)')}}</text>
		</view>

		
		<up-popup :show="showBankPopup" v-model="baseData.cardForm.bankName" mode="bottom" :round="20" class="custom-width-bottom">
			<view class="bank-popup">
				<view class="bank-popup-header">
					<text class="bank-popup-title">{{t('Select Wallet')}}</text>
					<view class="bank-popup-close" @click="closeBankPopup">
						<up-icon name="close" size="1.5rem"></up-icon>
					</view>
				</view>

				<scroll-view scroll-y="true" class="bank-list">
					<view class="bank-item" v-for="(bank, index) in bankName" :key="index" @click="selectBank(bank)">
						{{ bank.label }}
					</view>
				</scroll-view>
			</view>
		</up-popup>

		
		<a :href="baseData.aircraftUrl" target="_blank">
			<img style="width: 2rem; height: 2rem; position: fixed; bottom: 30vh; right: 6px; z-index: 99999;" src="@/static/teltgram.png" />
		</a>
	</view>
</template>

<script setup lang="ts">
	import { useI18n } from 'vue-i18n';
	import { onMounted, reactive, ref } from 'vue'
	import { setBankCard, bankCardInfo } from '@/api/user'

	const { t } = useI18n();
	const countryId = ref(null);
	const baseData = reactive({
		aircraftUrl: uni.getStorageSync('aircraftUrl'),
		paymentMethod: 'bKash',
		cardForm: {
			ifsc: null,
			holder_name: null,
			account_num: null,
			country: 4,
			platform: 1,
			ac_type: 2,
			acc_phone:null,
			accEmail:""
		}
	})
	const bankName = ref([
		{ label: "BKASH", value: "bkash" },
		{ label: "NAGAD", value: "nagad" },]);
	const showBankPopup = ref(false);

	const switchPaymentMethod = async (method) => {
		baseData.paymentMethod = method;
		const ress = await bankCardInfo({ country: 4, platform: baseData.cardForm.platform })
		if (ress.code == 0) {
			baseData.cardForm = ress.data.length > 0 ? ress.data : {
				ifsc: null,
				holder_name: null,
				account_num: null,
			}
		}

	}

	const showBankSelector = () => {
		showBankPopup.value = true;
	}


	const closeBankPopup = () => {
		showBankPopup.value = false;
	}

	const selectBank = (bank) => {
		baseData.cardForm.ifsc = bank.label; 
		showBankPopup.value = false;
	}
	const createDefaultCardForm = ref({
	  ifsc: null,
	  holder_name: null,
	  account_num: null,
	  country: 2,
	  acc_phone: null,
	  ac_type: 1,
	  platform: 1,
	  ext: { accEmail: null }
	})
	const addBank = async () => {
		if (!baseData.cardForm.holder_name) {
			uni.showToast({
				title: t('Please fill in') + t('Account Holder Name'),
				icon: "none"
			})
			return
		}
		const holder_nameregex = /^[A-Za-z\s]+$/;
		if (!holder_nameregex.test(baseData.cardForm?.holder_name)) {
			uni.showToast({
				title: t('Account name error'),
				icon: "none"
			})
			return
		}
		const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
		if (!emailRegex.test(baseData.cardForm.accEmail)) {
			uni.showToast({
				title: t('Invalid Email Format'),
				icon: 'none',
			})
			return
		}
		if (!baseData.cardForm.acc_phone) {
			uni.showToast({
				title: t('Please fill in') + t('Phone'),
				icon: "none"
			})
			return
		}
		baseData.cardForm.holder_name = baseData.cardForm.holder_name?.replace(/\s*/g, '');
		baseData.cardForm.country = 4;
		baseData.cardForm.ac_type = 2;
		const ifscCode = baseData.cardForm.ifsc;
		baseData.cardForm.ifsc = getBankValue(ifscCode);
				
				Object.assign(
				  createDefaultCardForm.value,
				  (({ ac_type, country, holder_name, acc_phone, ifsc, account_num,platform }) =>
				    ({ ac_type, country, holder_name, acc_phone, ifsc, account_num ,platform}))(baseData.cardForm)
				)
				
				
				createDefaultCardForm.value.ext = {
				  ...(createDefaultCardForm.value.ext || {}),
				  accEmail: baseData.cardForm.accEmail ?? baseData.cardForm.accEmail ?? ''
				}
		const res = await setBankCard(createDefaultCardForm.value)
		if (res.code == 0) {
			uni.showToast({
				title: res.msg,
				icon: "none"
			})
			goWithdraw()
		} else {
			uni.showToast({
				title: res.msg,
				icon: "none"
			})
		}
	}
	const getBankLabel = (ifscCode:any) => {
		const bank = bankName.value.find(item => item.value === ifscCode);

		return bank ? bank.label : null;
	};

	const getBankValue = (ifscCode:any) => {

		const bank = bankName.value.find(item => item.label === ifscCode);

		return bank ? bank.value : null;
	};

		const goWithdraw = () => {
			window.top?.postMessage('/pages/withdraw/index', window.location.origin)
			uni.navigateTo({
			  url: '/pages/withdraw/index',
			})
		}
	const getCard = async () => {
		const ress = await bankCardInfo({ country: 4, platform: baseData.cardForm.platform })
		if (ress.code == 0) {
			baseData.cardForm = ress.data.length > 0 ? ress.data[0] : {
				ifsc: null,
				holder_name: null,
				account_num: null,
				id_number: null,
				acc_phone: null,
			},
				baseData.cardForm.platform = uni.getStorageSync('platform');
				baseData.cardForm.ext = baseData.cardForm.ext || {};
				baseData.cardForm.accEmail = baseData.cardForm.ext.accEmail ?? '';
			
				const ifscCode = baseData.cardForm.ifsc;
				if(ifscCode!==null){
					baseData.cardForm.ifsc = getBankLabel(ifscCode);
				}
			
		}
	}
	onMounted(() => {

		uni.setNavigationBarTitle({
			title: 'Quovo ' + t('Earn money so easy') + '!'
		});
		baseData.cardForm.platform = uni.getStorageSync('platform');

		getCard()
	});
</script>

<style lang="scss" scoped>
@import '@/styles/bank.scss';
</style>